<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body> 
  <div id="root">
    <school></school>
    <hr>
    <student></student>
    <hr>
    <hello></hello>
  </div>

  <div id="root2">
    <hello></hello>
  </div>
</body>

<script>
  Vue.config.productionTip = false

  // 创建school组件
  const school = Vue.extend({
    // el: '#root', // 一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: 'gzhu',
        address: 'gz'
      }
    },
    template: `
    <div>
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
    `
  })

  // 创建student组件
  const student = Vue.extend({
    data() {
      return {
        studentName: 'ccc',
        age: 22
      }
    },
    template: `
    <div>
      <h2>学校姓名：{{studentName}}</h2>
      <h2>学校年龄：{{age}}</h2>
    </div>
    `
  })

  const hello = Vue.extend({
    template: `
      <div>
        <h2>hello {{name}}</h2>
      </div>
    `,
    data() {
      return {
        name: 'Tom'
      }
    }
  })

  // 全局注册组件
  Vue.component("hello", hello)

  // 注册组件
  new Vue({
    el: '#root',
    components: {
      school,
      student
    }
  })


</script>

</html>